<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我要吃火锅 | 首页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="/assets/i/favicon.png">
    <link rel="stylesheet" href="/assets/css/amazeui.min.css"/>
    <style>
    .get {
      background: #1E5B94;
      color: #fff;
      text-align: center;
      padding: 100px 0;
    }

    .get-title {
      font-size: 200%;
      border: 2px solid #fff;
      padding: 20px;
      display: inline-block;
    }

    .get-btn {
      background: #fff;
    }

    .detail {
      background: #fff;
    }

    .detail-h2 {
      text-align: center;
      font-size: 150%;
      margin: 40px 0;
    }

    .detail-h3 {
      color: #1f8dd6;
    }

    .detail-p {
      color: #7f8c8d;
    }

    .detail-mb {
      margin-bottom: 30px;
    }

    .hope {
      background: #0bb59b;
      padding: 50px 0;
    }

    .hope-img {
      text-align: center;
    }

    .hope-hr {
      border-color: #149C88;
    }

    .hope-title {
      font-size: 140%;
    }

    .about {
      background: #fff;
      padding: 40px 0;
      color: #7f8c8d;
    }

    .about-color {
      color: #34495e;
    }

    .about-title {
      font-size: 180%;
      padding: 30px 0 50px 0;
      text-align: center;
    }

    .footer p {
      color: #7f8c8d;
      margin: 0;
      padding: 15px 0;
      text-align: center;
      background: #2d3e50;
    }
    </style>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
  <div class="am-container">
    <h1 class="am-topbar-brand"><a href="/">火火火锅</a></h1>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only"
            data-am-collapse="{target: '#collapse-head'}">
            <span class="am-sr-only">切换</span>
            <span class="am-icon-bars"></span>
    </button>

    <div class="am-collapse am-topbar-collapse" id="collapse-head">
      <ul class="am-nav am-nav-pills am-topbar-nav">
        <li class="am-active"><a href="">首页</a></li>
        <li><a href="">test</a></li>
        <li class="am-dropdown" data-am-dropdown>
          <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
            test1 <span class="am-icon-caret-down"></span>
          </a>
          <ul class="am-dropdown-content">
            <li class="am-dropdown-header">标题</li>
            <li><a href="">1. 默认样式</a></li>
            <li><a href="">2. 基础设置</a></li>
            <li><a href="">3. 文字排版</a></li>
            <li><a href="">4. 网格系统</a></li>
          </ul>
        </li>
      </ul>

      <div class="am-topbar-right">
        <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span> 注册</button>
      </div>

      <div class="am-topbar-right">
        <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-user"></span> 登录</button>
      </div>
    </div>
  </div>
</header>

<div class="get">
  <div class="am-g">
    <div class="am-u-lg-12"  style="text-align: center;">
      <h1 class="get-title"> I Want HotPot <br> 我要吃火锅 </h1>
      
      <p>
        你的火锅号为：{{ UserID }}
      </p>
      <p>
        本项目由：假期长到刘海接胡子、闲到做梦吃火锅的小火车瞎**乱写
      </p>

      <p>
        <a href="/Room" class="am-btn am-btn-sm get-btn">开始吃火锅√</a>
      </p>
      <div class="am-u-md-12">
        <form action="/SearchRoom"  method="post" class="am-form am-u-sm-12">
            <div class="am-form-group am-u-sm-9">
              <input type="text" class="am-align-right" style="width: 66%;" id="RoomId" name="RoomId" placeholder="请输入房间号" required/>
            </div>
            <div class="am-form-group am-u-sm-3">
              <button type="submit" class="am-btn am-btn-default am-round">进入</button>
            </div>
        </form>
      </div>
      <button type="button" class="am-btn am-btn-default am-radius" data-am-modal="{target: '#modal-1'}">查看已有房间</button>

    </div>
  </div>
</div>

  <div class="am-modal am-modal-no-btn" tabindex="-1" id="modal-1">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">已有房间：
        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
      </div>
      <div class="am-modal-bd">
        {% for RoomId in RoomIdDict %}
        <a href="/Room/{{ RoomId }}" class="am-btn am-btn-link">{{ RoomId }}</a>
        <hr data-am-widget="divider" class="am-divider am-divider-default" />
        {% endfor %}
      </div>
    </div>
  </div>

<div class="detail">
  <div class="am-g am-container">
    <div class="am-u-lg-12">
      <h2 class="detail-h2">注意事项和相关信息：</h2>

      <div class="am-g">
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">

          <h3 class="detail-h3">
            <i class="am-icon-mobile am-icon-sm"></i>
            在线吃火锅
          </h3>

          <p class="detail-p">
            如果你只是闲的发慌，无聊玩手机，那你可以尝试玩一下这个，但如果你是想吃真的火锅，这里并不能让你美梦成真
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-cogs am-icon-sm"></i>
            好友开黑
          </h3>

          <p class="detail-p">
            可以多人开房吃火锅，房间的时限为6小时，当然，如果突然没了，请不要惊讶，毕竟这个项目是我随便写的
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-check-square-o am-icon-sm"></i>
            没有优化
          </h3>

          <p class="detail-p">
            这个项目使用了国内的UI框架：妹子UI，如果你对这个项目有什么疑惑，恰好你认识小火车，那你可以私聊问，如果不认识，那就不要反馈了，毕竟这个项目是我写着玩的
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-send-o am-icon-sm"></i>
            随时随地吃火锅
          </h3>

          <p class="detail-p">
            当然，你得有网络才行，你的用户ID基于浏览器的cookies，如果你清除了，或者换了浏览器，就不是同一个用户啦。
          </p>
        </div>
      </div>
    </div>
  </div>
</div>


<footer class="footer">
  <p>© 2020 <a href="https://gitee.com/KratosMax/OpManager" target="_blank">小火车哒</a></p>
</footer>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/assets/js/amazeui.min.js"></script>
</body>
</html>
